<template>
  <view class="user-page">
    <!-- 头部信息（登录/未登录） -->
    <view class="user-header">
      <image 
        class="user-avatar" 
        :src="userInfo.avatar || '/static/avatar-default.png'" 
        mode="aspectFill"
        @click="isLogin && toUserProfile"
      />
      <view class="user-info">
        <text class="user-name">{{ isLogin ? `HI~${userInfo.username}` : "HI~欢迎回来" }}</text>
        <button class="login-btn" @click="goToLogin" v-if="!isLogin">登录</button>
        <button class="logout-btn" @click="logout" v-if="isLogin">退出登录</button>
      </view>
      <view class="user-stats" v-if="isLogin">
        <text>关注{{ userInfo.followCount || 0 }}</text>
        <text>话题{{ userInfo.topicCount || 0 }}</text>
      </view>
    </view>

    <!-- 功能入口（未登录禁用） -->
    <view class="user-func">
      <view 
        class="func-item" 
        :class="{ disabled: !isLogin }" 
        @click="toCollection"
        :style="{ pointerEvents: !isLogin ? 'none' : 'auto' }"
      >
        <text class="func-icon">☆</text>
        <text class="func-text">收藏</text>
      </view>
      <view 
        class="func-item" 
        :class="{ disabled: !isLogin }" 
        @click="toHistory"
        :style="{ pointerEvents: !isLogin ? 'none' : 'auto' }"
      >
        <text class="func-icon">📜</text>
        <text class="func-text">历史</text>
      </view>
      <view class="func-item" @click="toSetting">
        <text class="func-icon">⚙️</text>
        <text class="func-text">设置</text>
      </view>
    </view>

    <!-- 发布入口 -->
    <view class="publish-area">
      <text class="publish-text">已有385,893人在这里发布身边的新鲜事</text>
      <button class="publish-btn" @click="toPublish" :disabled="!isLogin">我也要发布</button>
    </view>

    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, onMounted, onShow } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 登录状态
const isLogin = ref(false);
// 用户信息
const userInfo = ref({
  username: "",
  avatar: "",
  followCount: 0,
  topicCount: 0
});

// 页面显示时同步登录状态（解决登录后返回页面状态未更新问题）
onShow(() => {
  checkLoginStatus();
});

// 页面加载时读取缓存
onMounted(() => {
  checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
  try {
    const storedUser = uni.getStorageSync('userInfo');
    if (storedUser && typeof storedUser === 'object') {
      isLogin.value = true;
      userInfo.value = { ...userInfo.value, ...storedUser };
    } else {
      isLogin.value = false;
      userInfo.value = { username: "", avatar: "", followCount: 0, topicCount: 0 };
    }
  } catch (e) {
    console.error('读取用户信息失败:', e);
    isLogin.value = false;
  }
};

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({ 
    url: "/pages/login/login",
    // 登录成功后刷新页面
    events: {
      loginSuccess: () => {
        checkLoginStatus();
      }
    }
  });
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync('userInfo');
        checkLoginStatus();
        uni.showToast({ title: '退出成功' });
      }
    }
  });
};

// 跳转到个人资料页
const toUserProfile = () => {
  uni.navigateTo({ url: "/pages/profile/profile" });
};

// 跳转到收藏页
const toCollection = () => {
  if (!isLogin.value) return uni.showToast({ title: "请先登录", icon: "none" });
  uni.navigateTo({ url: "/pages/collection/collection" });
};

// 跳转到历史页
const toHistory = () => {
  if (!isLogin.value) return uni.showToast({ title: "请先登录", icon: "none" });
  uni.navigateTo({ url: "/pages/history/history" });
};

// 跳转到设置页
const toSetting = () => {
  uni.navigateTo({ url: "/pages/setting/setting" });
};

// 跳转到发布页
const toPublish = () => {
  if (!isLogin.value) return uni.showToast({ title: "请先登录", icon: "none" });
  uni.navigateTo({ url: "/pages/publish/publish" });
};
</script>

<style scoped>
.user-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 60px;
  background: #f5f5f5;
}
.user-header {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 2rpx solid #f0f0f0;
}
.user-info {
  flex: 1;
}
.user-name {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  display: block;
  color: #333;
}
.login-btn {
  background: #ff3333;
  color: #fff;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}
.logout-btn {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #ddd;
  padding: 8rpx 20rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
  margin-top: 5rpx;
}
.user-stats {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  gap: 5rpx;
}
.user-func {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.func-item {
  text-align: center;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  transition: background-color 0.2s;
}
.func-item:active {
  background-color: #f5f5f5;
}
.func-item.disabled {
  opacity: 0.5;
}
.func-icon {
  font-size: 36rpx;
  margin-bottom: 5rpx;
  display: block;
}
.func-text {
  font-size: 24rpx;
  color: #666;
}
.publish-area {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.publish-text {
  font-size: 24rpx;
  color: #666;
  line-height: 32rpx;
}
.publish-btn {
  background: #ff3333;
  color: #fff;
  border: none;
  padding: 10rpx 30rpx;
  border-radius: 4rpx;
  margin-top: 15rpx;
  font-size: 26rpx;
}
.publish-btn:disabled {
  background: #ccc;
  color: #fff;
}
</style>